<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遗传算法</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>遗传</h1>
<div id="main">
    <div class="method-list">
        <h3>函数列表:</h3>
        <ul class="clearfix">
            <li :class="{active:item.isActive}" v-for="item in methodList" @click='getActiveMethod(item)'>
                {{item.name}}
            </li>
        </ul>
    </div>
    <div class="param-list">
        <h3>参数列表:</h3>
        <ul class="clearfix">
            <li>进化代数:<input type="number"
                            v-model="maxgen"
                            placeholder="请输入进化代数(大于0的整数)">
            </li>
            <li>种群数目:<input type="number"
                            v-model="sizepop"
                            placeholder="请输入种群数目">
            </li>
            <li>染色体长度:<input type="number"
                             v-model="lenchrom"
                             placeholder="请输入染色体长度">
            </li>
            <li>交叉概率:<input type="number"
                            v-model="pcross"
                            placeholder="请输入交叉概率(0~1)">
            </li>
            <li>变异概率:<input type="number"
                            v-model="pmutation"
                            placeholder="请输入变异概率(0~1)">
            </li>
            <li>上界:<input type="number"
                          v-model="bound_up"
                          placeholder="请输入上界">
            </li>
            <li>下界:<input type="number"
                          v-model="bound_down"
                          placeholder="请输入下界">
            </li>
        </ul>
    </div>
    <div class="btn-list clearfix">
        <button @click='calculate'>计算结果</button>
        <!--<button class="green" @click='calculate'> 其他功能按钮</button>-->
    </div>

    <div class="chart-list clearfix">
        <div class="chart">
            <div id="fitness" :style="{width:'100%',height:'450px'}">

            </div>
        </div>
        <div class="chart">
            <div id="param" :style="{width:'100%',height:'450px'}">

            </div>
        </div>
    </div>
    <div class="evolve-process-header btn-list ">
        <button class='step1'
                @click='evolveStep1'
                v-show="step==1 && evolveTimes == 0">初始化
        </button>
        <!--firstEvolve.startChrom,firstEvolve.fitness,firstEvolve.fitness_prob-->

        <button class="step5"
                v-show="step==5"
                @click='evolveStep5()'>
            下一代
        </button>
        <div class="pie-chart" v-if="step>1">
            <div id="pie" :style="{'width': '100%', 'height':'100%'}"></div>
        </div>
    </div>
    <div class="evolve-process">
        <div>
            <ol class="clearfix">
                <li class="card">
                    <h3>进化前(step 1)</h3>
                    <ol>
                        <li>
                            <ol class="clearfix">
                                <li>参数</li>
                                <li v-for="param in evolveParamList">{{param}}</li>
                                <li>fitness</li>
                            </ol>
                            <ol class="clearfix" v-for="(item,index) in firstEvolve.startChrom">
                                <li>{{index+1}}</li>
                                <li v-for="param in item">{{param}}</li>
                                <li>{{firstEvolve.fitness[index]}}</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li v-show="step>=2" class="card">
                    <h3>选择后(step 2)
                        <button class='step2'
                                @click='evolveStep2()'
                                v-show="step==2">开始选择
                        </button>
                    </h3>
                    <ol>
                        <li>
                            <ol class="clearfix">
                                <li>参数</li>
                                <li v-for="param in evolveParamList">{{param}}</li>
                                <li>fitness</li>
                            </ol>
                            <ol class="clearfix" v-for="(item,index) in firstEvolve.selectChrom">
                                <li>{{index+1}}</li> <!--:class="{active:firstEvolve.selectActiveList[index]}"-->
                                <li v-for="param in item">{{param}}</li>
                                <li>{{firstEvolve.selectFitness[index]}}</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li v-show="step>=3" class="card">
                    <h3>交叉后(step 3)
                        <button class='step3'
                                @click='evolveStep3()'
                                v-show="step==3">开始交叉
                        </button><!--firstEvolve.selectChrom-->
                    </h3>
                    <ol>
                        <li>
                            <ol class="clearfix">
                                <li>参数</li>
                                <li v-for="param in evolveParamList">{{param}}</li>
                                <li>fitness</li>
                            </ol>
                            <ol class="clearfix" v-for="(item,index) in firstEvolve.crossChrom">
                                <li>{{index+1}}</li>
                                <li v-for="param in item">{{param}}</li>
                                <li>{{firstEvolve.crossFitness[index]}}</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li v-show="step>=4" class="card">
                    <h3>变异后(step 4)
                        <button class='step4'
                                @click='evolveStep4()'
                                v-show="step==4">开始变异
                        </button><!--firstEvolve.crossChrom-->
                    </h3>
                    <ol>
                        <li>
                            <ol class="clearfix">
                                <li>参数</li>
                                <li v-for="param in evolveParamList">{{param}}</li>
                                <li>fitness</li>
                            </ol>
                            <ol class="clearfix" v-for="(item,index) in firstEvolve.mutationChrom">
                                <li>{{index+1}}</li>
                                <li v-for="param in item">{{param}}</li>
                                <li>{{firstEvolve.mutationFitness[index]}}</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
</div>
</body>
</html>
<!-- 开发 -->
<!--<script src="node_modules/vue/dist/vue.js"></script>-->
<!--<script src="node_modules/echarts/dist/echarts.js"></script>-->

<!-- 构建 -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/echarts/dist/echarts.min.js"></script>
<script>
    Vue.prototype.$echarts = echarts;
    var app = new Vue({
        el: '#main',
        data: {
            sizepop: 50, //种群的数目
            lenchrom: 5, //染色体长度
            bound_up: (0.9 * Math.PI), //上界
            bound_down: 0,// 下界
            fitness: [], //种群每个个体的适应度
            chrom: [],// 种群数组
            fitness_prob: [],// 每个个体被选中的概率
            pcross: 0.6, // 交叉概率
            pmutation: 0.1,// 变异概率
            maxgen: 150,// 进化代数
            gbest: 0, // 所有进化中的最优值
            gbest_index: 0, // 取得最优值的迭代次数序号
            average_best: [], // 每一代平均最优值
            gbestList: [], // 每一代最优值
            gBadList: [], //每一代的最差值
            gbest_pos: [],// 取最优值的位置
            best_chrom_list: [], // 每一代的最优染色体数组
            //目标函数列表
            methodList: [

                {
                    name: 'f1',
                    isActive: false,
                    lenchrom:2,
                    method: function (arr) {
                        var x = arr[0];
                        var y = arr[1];
                        return x+y;
                    }
                },
                {
                    name: '-5*sin(x1)*sin(x2)*sin(x3)*sin(x4)*sin(x5) - sin(5*x1)*sin(5*x2)*sin(5*x3)*sin(5*x4)*sin(5*x5) + 8',
                    isActive: true,
                    lenchrom:5,
                    method: function (arr) {
                        var firstXResult = -5;
                        var secondXResult = 1;
                        arr.forEach(function (item) {
                            firstXResult = firstXResult * Math.sin(item);
                            secondXResult = secondXResult * Math.sin(5 * item);
                        });
                        var result = parseFloat(firstXResult - secondXResult + 8);
//                        console.log('+++', result);
                        return result;
//                        return -5 * Math.sin(arr[0]) * Math.sin(arr[1]) * Math.sin(arr[2]) * Math.sin(arr[3]) * Math.sin(arr[4])
//                            - Math.sin(5 * arr[0]) * Math.sin(5 * arr[1]) * Math.sin(5 * arr[2]) * Math.sin(5 * arr[3]) * Math.sin(5 * arr[4]) + 8
                    }
                }
            ],
            activeMethod: {},
            paramList: [
                {name: '参数名字1', value: ''},
                {name: '参数名字2', value: ''},
                {name: '参数名字3', value: ''}
            ],
            //结果显示
            contrastResults: [
                {str: '', isChange: false}
            ],
            isCalculating: true,
            isUnChangeCanShow: false,
            showUnChangeBtnStr: '显示全部对比',

            //fitness 图表
            fitnessChartOptions: {
                title: {
                    text: 'fitness'
//                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['平均fitness', '最优fitness', '最差fitness']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: false,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '平均fitness',
                        type: 'line',
                        data: [],
//                        markPoint: {
//                            show:false,
//                            data: [
//                                {type: 'max', name: '最大值'},
//                                {type: 'min', name: '最小值'}
//                            ]
//                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '最优fitness',
                        type: 'line',
                        data: [],
//                        markPoint: {
//                            show:false,
//                            data: [
//                                {type: 'max', name: '最大值'},
//                                {type: 'min', name: '最小值'}
//                            ]
//                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '最差fitness',
                        type: 'line',
                        data: [],
//                        markPoint: {
//                            show:false,
//                            data: [
//                                {type: 'max', name: '最大值'},
//                                {type: 'min', name: '最小值'}
//                            ]
//                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            },
            paramChartOptions: {
                title: {
                    text: '最优染色体'
//                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: []
            },
            selectPieChartOptions:{
                title : {
                    text: '选择过程图',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: [] // legendData
                },
                series : [
                    {
                        name: 'fitness',
                        type: 'pie',
                        radius : '55%',
                        center: ['40%', '50%'],
                        data: [],//seriesData
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            // 进化过程演示
            step: 1, // 分为四步
            // 进化染色体参数个数
            evolveParamList: [],
            evolveTimes: 0,
            firstEvolve: {
                startChrom: [],
                fitness: [],
                selectChrom: [],
                selectFitness:[],
                crossChrom: [],
                crossFitness:[],
                mutationChrom: [],
                mutationFitness:[],
                fitness_prob: []
            }
        },
        mounted: function () {
            this.activeMethod = this.methodList[0];
            var fitnessChartDom = document.getElementById('fitness');
            var paramChartDom = document.getElementById('param');
            this.fitnessChart = this.$echarts.init(fitnessChartDom);
            this.paramChart = this.$echarts.init(paramChartDom);
            this.fitnessChart.setOption(this.fitnessChartOptions);
            this.paramChart.setOption(this.paramChartOptions);
            var _this = this;
            window.onresize = function (ev) {
                var timer = null;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    _this.fitnessChart.resize();
                    _this.paramChart.resize();
                    clearTimeout(timer)
                }, 300);
            };

            //演示进化 参数个数初始化
            this.evolveParamList = [];
            var evolveParamStr = '';
            for (var i = 0; i < this.lenchrom; i++) {
                evolveParamStr = 'x' + (i + 1);
                this.evolveParamList.push(evolveParamStr)
            }
        },
        methods: {

            // 选择目标函数
            getActiveMethod: function (item) {
                this.lenchrom = item.lenchrom;
                this.activeMethod = item;
                this.methodList.forEach(function (t) {
                    t.isActive = false;
                });
                item.isActive = true;
            },
            // 求和函数
            sum: function (arr) {//param??
                var sum_fit = 0;
                for (var i = 1; i < this.sizepop; i++) {
                    sum_fit += arr[i]
                }
                return sum_fit
            },
            //求最小值函数
            min: function (fitness) {
                //console.log('fitness',fitness)
                var min_fit = fitness[0];// double min_fit = *fitness;
                var min_index = 0;
                var arr = [0, 0];
                for (var i = 1; i < this.sizepop; i++) {
                    if (fitness[i] < min_fit) {
                        min_fit = fitness[i];
                        min_index = i;
                    }
                }
                arr[0] = min_index;
                arr[1] = min_fit;
                return arr;
            },
            // 求最大值函数
            max: function (fitness) {
                var max_fit = fitness[0];// double min_fit = *fitness;
                var max_index = 0;
                var arr = [0, 0];
                for (var i = 1; i < this.sizepop; i++) {
                    if (fitness[i] > max_fit) {
                        max_fit = fitness[i];
                        max_index = i;
                    }
                }
                arr[0] = max_index;
                arr[1] = max_fit;
                return arr;
            },
            //种群初始化
            init_chrom: function () {
                var chrom = [];
                var fitness = [];
                for (var i = 0; i < this.sizepop; i++) {
                    var arr = [];
                    for (var j = 0; j < this.lenchrom; j++) {
                        var value = parseFloat(this.bound_up * Math.random());
                        arr.push(value);
                    }
                    chrom.push(arr);
                    // 初始化适应度
                    fitness[i] = this.activeMethod.method(chrom[i]);
                }
                return {
                    chrom: chrom,
                    fitness: fitness
                };
            },
            // 选择操作
            select: function (chrom, fitness, fitness_prob) {
                var selectFitnessIndex = [];
                var selectChrom = chrom;
                var selectFitness = fitness;
                var select_fitness_prob = fitness_prob;
                var index = new Array(this.sizepop);
                for (var i = 0; i < this.sizepop; i++) {
                    var arr = selectChrom[i];
                    selectFitness[i] = 1 / (this.activeMethod.method(arr));
                }
                var sum_fitness = 0;
                for (var j = 0; j < this.sizepop; j++) {
                    sum_fitness += selectFitness[j] // 适应度求和
                }

                for (var k = 0; k < this.sizepop; k++) {
                    select_fitness_prob[k] = selectFitness[k] / sum_fitness;
                }

                for (var l = 0; l < this.sizepop; l++) {
                    selectFitness[l] = 1 / selectFitness[l] // 恢复函数值
                }

//                // 初始化选择记录是否活动
//                for (var c = 0; c < this.sizepop; c++) {
//                    this.pickSelectActiveItem(c, false)
//                }

                for (var m = 0; m < this.sizepop; m++) {
                    var pick = Math.random();
                    while (pick < 0.0001) {
                        pick = Math.random();
                    }
                    for (var n = 0; n < this.sizepop; n++) {
                        pick = pick - select_fitness_prob[n];
                        if (pick <= 0) {
                            index[m] = n;
                            break;
                        }
                    }
                }

                for (var a = 0; a < this.sizepop; a++) {
                    for (var b = 0; b < this.lenchrom; b++) {
                        selectChrom[a][b] = selectChrom[index[a]][b];
                    }
                    selectFitness[a] = selectFitness[index[a]];
                    selectFitnessIndex.push(index[a]);
                }
                return {
                    chrom: selectChrom,
                    fitness: selectFitness,
                    fitness_prob: select_fitness_prob,
                    selectFitnessIndex:selectFitnessIndex
                };
            },
            //交叉操作
            cross: function (chrom) {
                var crossChrom = chrom;
                for (var i = 0; i < this.sizepop; i++) {
                    // 两个随机选取的染色体序号
                    var choice1 = parseInt(Math.random() * (this.sizepop - 1));
                    var choice2 = parseInt(Math.random() * (this.sizepop - 1));
                    var pick = Math.random();// 用于决定是否进行交叉操作
                    if (pick > this.pcross) {
                        continue;
                    }
                    var flag = 0;
                    var pos = 0;
                    var newPick = 0;
                    while (flag === 0) {
                        newPick = Math.random();
                        pos = parseInt(newPick * this.lenchrom);
                        while (pos > this.lenchrom - 1) {
                            newPick = Math.random();
                            pos = parseInt(newPick * this.lenchrom);// 处理越界
                        }


                        // 交叉开始
                        var r = Math.random();
                        var v1 = crossChrom[choice1][pos];
                        var v2 = crossChrom[choice2][pos];
                        crossChrom[choice1][pos] = r * v2 + (1 - r) * v1;
                        crossChrom[choice2][pos] = r * v1 + (1 - r) * v2; //交叉结束

                        if (crossChrom[choice1][pos] >= this.bound_down &&
                            crossChrom[choice1][pos] <= this.bound_up &&
                            crossChrom[choice2][pos] >= this.bound_down &&
                            crossChrom[choice2][pos] <= this.bound_up) {
                            flag = 1;
                        }
                    }
                }
                return crossChrom;
            },
            // 变异操作
            mutation: function (chrom) {
                var mutationChrom = chrom;
                for (var i = 0; i < this.sizepop; i++) {
                    var pick = Math.random();
                    var choice = parseInt(pick * this.sizepop);
                    while (choice > this.sizepop - 1) {
                        pick = Math.random();
                        choice = parseInt(pick * this.sizepop);//处理下标越界
                    }
                    pick = Math.random(); // 决定是否进行变异
                    if (pick > this.pmutation) {
                        continue;
                    }
                    pick = Math.random();
                    var pos = parseInt(pick * this.lenchrom);

                    while (pos > this.lenchrom - 1) {
                        pick = Math.random();
                        pos = parseInt(pick * this.lenchrom)
                    }
                    var v = mutationChrom[i][pos];
                    var v1 = v - this.bound_up;

                    var v2 = this.bound_down - v;

                    var r = Math.random();
                    var r1 = Math.random();
                    if (r >= 0.5) {
                        mutationChrom[i][pos] = v - v1 * r1 * (1 - (i / this.maxgen) * (1 - (i / this.maxgen)));
                    } else {
                        mutationChrom[i][pos] = v + v2 * r1 * (1 - (i / this.maxgen) * (1 - (i / this.maxgen)))
                    }
                }
                return mutationChrom
            },
            //计算操作
            calculate: function () {
                this.sizepop = 50;
                this.contrastResults = [];
                //初始化三个fitness chartLine
                this.average_best = [];
                this.gBadList = [];
                this.gbestList = [];
                this.best_chrom_list = [];

                var init = this.init_chrom();
                var chrom = init.chrom;
                var fitness = init.fitness;
                var best_fit_index_arr = this.min(fitness);
                var best_index = parseInt(best_fit_index_arr[0]);
                var fitness_prob = [];//每个种群被选择的概率
                this.gbest = best_fit_index_arr[1];// 最优值
                this.gbestList.push(this.gbest);

                var bad_fit_index_arr = this.max(fitness);//最差值
                this.gBadList.push(bad_fit_index_arr[1]);

                this.gbest_index = 0;
                this.average_best[0] = this.sum(fitness) / this.sizepop;//初始化平均最优值

                for (var i = 0; i < this.lenchrom; i++) {
                    this.gbest_pos[i] = parseFloat(chrom[best_index][i].toString());
                }
                //进化开始
                for (var j = 0; j < this.maxgen; j++) {

                    // 选择
                    var selectChromInit = this.select(chrom, fitness, fitness_prob);// 选择
                    var selectChrom = selectChromInit.chrom;

                    fitness = selectChromInit.fitness;
                    fitness_prob = selectChromInit.fitness_prob;

                    // 交叉
                    var crossChrom = this.cross(selectChrom);
                    //变异
                    chrom = this.mutation(crossChrom);

                    for (var k = 0; k < this.sizepop; k++) {
                        fitness[k] = this.activeMethod.method(chrom[k])
                    }

                    var sum_fit = this.sum(fitness);
                    this.average_best[j + 1] = sum_fit / this.sizepop;// 平均最优值

                    var arr = this.min(fitness); //最优值
                    var new_best = arr[1];//这里去找
                    var new_best_index = parseInt(arr[0]);

                    //每一代最优染色体记录
                    this.best_chrom_list.push(chrom[new_best_index]);

                    var badArr = this.max(fitness); //最差值
                    var new_bad = badArr[1];

                    this.gbestList.push(new_best);
                    this.gBadList.push(new_bad);

                    var isChange = false;
                    var str = '最优:    ' + this.gbest + '     新的最优:   ' + new_best;

                    if (new_best < this.gbest) {
                        this.gbest = new_best;
                        isChange = true;
                        for (var l = 0; l < this.lenchrom; l++) {
                            this.gbest_pos[l] = parseFloat(chrom[new_best_index][l].toString());
                        }
                        this.gbest_index = j + 1;
                    }
                    this.contrastResults.push({isChange: isChange, str: str})
                }
                console.log("遗传算法次数", this.maxgen);
                console.log("最优值", this.gbest);
                console.log("最优值在第几代取得", this.gbest_index);
                console.log("此代的平均最优值", this.average_best[this.gbest_index]);

                console.log("取得最优值的地方为", this.gbest_pos[0], this.gbest_pos[1], this.gbest_pos[2], this.gbest_pos[3], this.gbest_pos[4]);

                this.drawChart();

                this.isCalculating = false;
            },
            // 显示隐藏没有变化的对比
            showUnChange: function () {
                this.isUnChangeCanShow = !this.isUnChangeCanShow;
                if (this.isUnChangeCanShow) {
                    this.showUnChangeBtnStr = '隐藏全部对比';
                }
            },
            // 画图
            drawChart: function () {
                var _this = this;
                _this.fitnessChartOptions.xAxis[0].data = [];//置空横轴
                _this.paramChartOptions.xAxis[0].data = [];//置空横轴
                //初始化横轴
                this.average_best.forEach(function (t, index) {
                    var i = (index + 1).toString();
                    _this.fitnessChartOptions.xAxis[0].data.push(i);
                    _this.paramChartOptions.xAxis[0].data.push(i);
                });
                // 画图
                // fitness图三条线绘制
                this.fitnessChartOptions.series[0].data = this.average_best;
                this.fitnessChartOptions.series[1].data = this.gbestList;
                this.fitnessChartOptions.series[2].data = this.gBadList;
                this.fitnessChart.setOption(this.fitnessChartOptions);

                // 最优染色体绘制
                _this.paramChartOptions.legend.data = [];
                _this.paramChartOptions.series = [];
                for (var i = 0; i < this.lenchrom; i++) {
                    var str = 'x' + (i + 1);
                    _this.paramChartOptions.legend.data.push(str);//初始化曲线图的条数
                    //初始化曲线图的每条曲线的数值
                    _this.paramChartOptions.series.push(
                        {
                            name: str,
                            type: 'line',
                            data: []
                        }
                    );
                }
                for (var j = 0; j < _this.best_chrom_list.length; j++) {
                    for (var i = 0; i < this.lenchrom; i++) {
                        _this.paramChartOptions.series[i].data.push(_this.best_chrom_list[j][i]);
                    }
                }
                this.paramChart.setOption(this.paramChartOptions);
            },
            // 演示 第一步初始化
            evolveStep1: function () {
                this.sizepop = 10;
                //演示进化 参数个数初始化
                this.evolveParamList = [];
                var evolveParamStr = '';
                for (var i = 0; i < this.lenchrom; i++) {
                    evolveParamStr = 'x' + (i + 1);
                    this.evolveParamList.push(evolveParamStr)
                }
                this.step = 2;
                //第一次初始化
                var init = this.init_chrom();
                var chrom = init.chrom;
                this.firstEvolve.fitness = init.fitness;
                //初始化
                this.firstEvolve.startChrom = JSON.parse(JSON.stringify(chrom));

            },
            // 演示 第二步 选择
            evolveStep2: function () {
                this.sizepop = 10;
                // 选择
                //chrom, fitness, fitness_prob
                var chrom = JSON.parse(JSON.stringify(this.firstEvolve.startChrom));
                var fitness = JSON.parse(JSON.stringify(this.firstEvolve.fitness));
                var fitness_prob = [];

                var selectChromInit = this.select(chrom, fitness, fitness_prob);
                var selectChrom = JSON.parse(JSON.stringify(selectChromInit.chrom));
                this.firstEvolve.selectChrom = JSON.parse(JSON.stringify(selectChrom));
                this.firstEvolve.fitness_prob = JSON.parse(JSON.stringify(selectChromInit.fitness_prob));
                var selectFitness = [];
                for (var i = 0; i < this.sizepop; i++) {
                    selectFitness[i] = this.activeMethod.method(chrom[i]);
                }
                this.firstEvolve.selectFitness = selectFitness;
                this.firstEvolve.crossChrom = [];
                this.step = 3
            },
            // 演示 第三步 交叉
            evolveStep3: function () {
                this.sizepop = 10;
                var selectChrom = JSON.parse(JSON.stringify(this.firstEvolve.selectChrom));
                // 交叉
                var crossChrom = this.cross(selectChrom);
                this.firstEvolve.crossChrom = JSON.parse(JSON.stringify(crossChrom));
                var crossFitness = [];
                for (var i = 0; i < this.sizepop; i++) {
                    crossFitness[i] = this.activeMethod.method(crossChrom[i]);
                }
                this.firstEvolve.crossFitness = crossFitness;
                this.firstEvolve.mutationChrom = [];
                this.step = 4
            },
            // 演示 第四步 变异
            evolveStep4: function () {
                this.sizepop = 10;
                var crossChrom = JSON.parse(JSON.stringify(this.firstEvolve.crossChrom));
                var mutationChrom = this.mutation(crossChrom);
                this.firstEvolve.mutationChrom = JSON.parse(JSON.stringify(mutationChrom));
                var mutationFitness = [];
                for (var i = 0; i < this.sizepop; i++) {
                    mutationFitness[i] = this.activeMethod.method(mutationChrom[i]);
                }
                this.firstEvolve.mutationFitness = mutationFitness;
                this.step = 5;
                this.evolveTimes++;
            },
            evolveStep5: function () {
                this.sizepop = 10;
                this.step = 2;
                this.firstEvolve.startChrom = JSON.parse(JSON.stringify(this.firstEvolve.mutationChrom));
                var fitness = [];
                for (var i = 0; i < this.sizepop; i++) {
                    fitness[i] = this.activeMethod.method(this.firstEvolve.startChrom[i]);
                }
                this.firstEvolve.fitness = fitness;
                this.firstEvolve.selectChrom = [];
            }
        }
    })

</script>





















